<script setup lang="ts">
import { useTemplateRef } from 'vue'
import { gsap } from 'gsap'
import { useGsapContext } from '@/hooks'
import { useScrollGroup } from '@/hooks/reno14-pro.ts'

const { scrollGroup } = useScrollGroup()

const imgAreaRef = useTemplateRef<HTMLDivElement | null>('imgAreaRef')

useGsapContext(() => {
  if (!imgAreaRef.value) {
    return
  }

  const img1 = imgAreaRef.value!.querySelector('img:first-child') as HTMLImageElement | null
  const img2 = imgAreaRef.value!.querySelector('img:last-child') as HTMLImageElement | null
  if (img1 && img2) {
    const tl = gsap.timeline({
      defaults: {
        scrollTrigger: {
          trigger: imgAreaRef.value,
          start: 'top 90%',
          end: 'top 50%',
          scrub: true,
          invalidateOnRefresh: true,
          ...scrollGroup,
        },
      },
    })

    tl.fromTo(
      img1,
      {
        xPercent: 13,
        yPercent: 5,
      },
      {
        xPercent: 0,
        yPercent: 0,
      },
    )
    tl.fromTo(
      img2,
      {
        xPercent: -13,
      },
      {
        xPercent: 0,
      },
    )
  }
})

const descData = [
  {
    mainTitle: ['5000 万像素', '潜望长焦摄像头'],
    subtitle: ['85mm 黄金焦段', '3.5 倍光学变焦', '120 倍超光影变焦', 'OIS 光学防抖'],
  },
  {
    mainTitle: ['5000 万像素', '超广角摄像头'],
    subtitle: ['116° 低畸变超广视野', 'AF 自动对焦'],
  },
  {
    mainTitle: ['5000 万像素', '超清主摄'],
    subtitle: ['OIS 光学防抖', 'f/1.8 大光圈'],
  },
  {
    mainTitle: ['超亮智能闪光灯'],
    subtitle: ['创新三灯设计', '独立长焦闪光灯'],
  },
]
</script>

<template>
  <div class="mt-[3.125rem]">
    <div ref="imgAreaRef" class="w-[71.62vw] h-[81.86vw] relative mx-auto overflow-hidden">
      <img
        ref="img1Ref"
        class="w-[49.3vw] h-full object-cover object-top absolute top-0"
        src="@/views/product/reno14-pro/image/4/images-phone-1-mo-1.png.webp"
        alt=""
      />
      <img
        ref="img2Ref"
        class="w-[49.7vw] h-full object-cover absolute top-0 right-0"
        src="@/views/product/reno14-pro/image/4/images-phone-2-mo-1.png.webp"
        alt=""
      />
    </div>

    <div class="pt-[1.5rem] px-[1rem] pb-[15.8vw] bg-[#201f1c] flow-root">
      <div>
        <p class="text-lg">前置 5000 万超感光镜头</p>
        <div class="text-xs opacity-75 mt-[0.5rem] leading-[1.66]">
          <p>AF 自动对焦</p>
          <p>90° 小广角</p>
          <p>ƒ/2.0 大光圈</p>
        </div>
      </div>

      <div class="h-[1px] bg-[#ffffff4d] my-[1rem]"></div>

      <div class="grid grid-cols-2 auto-rows-auto gap-x-[1rem] gap-y-[1.5rem]">
        <div v-for="(item, key) in descData" :key>
          <div class="text-lg">
            <p v-for="mainTitle in item.mainTitle" :key="mainTitle">{{ mainTitle }}</p>
          </div>

          <div class="text-xs opacity-75 mt-[0.5rem] leading-[1.66]">
            <p v-for="subtitle in item.subtitle" :key="subtitle">{{ subtitle }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
